<template>
  <div id="forget">
    <div class="header">
      <div class="normBroad">
        <img :src="$globalImageUrl + collegesPicture.logo" alt="" @click="jumpTo('/home')">
        <h2 @click="jumpTo('/home')">创意实训平台</h2>
        <p><span @click="jumpTo('/login')">登录</span> | <span @click="jumpTo('/register')">注册</span></p>
      </div>
    </div>
    <div class="loginContent">
      <img class="loginBackImg" src="../../assets/img/login/login_back.png" alt="">
      <div class="loginPanelBox">
        <div class="loginPanel">
          <h2>忘记密码</h2>
          <ul>
            <li>
              <label for="loginMobile">
                <input id="loginMobile" type="text" placeholder="请输入您的手机号" v-model="mobile">
              </label>
            </li>
            <li>
              <label for="loginCheckCode" style="width: 62%;">
                <input id="loginCheckCode" type="text" placeholder="请输入您的验证码" v-model="checkCode">
              </label>
              <span @click="getCheckCode()">{{checkCodeText}}</span>
            </li>
            <li>
              <label for="loginPassword">
                <input id="loginPassword" type="password" placeholder="请输入您的密码" v-model="password">
              </label>
            </li>
            <li>
              <label for="loginRePassword">
                <input id="loginRePassword" type="password" placeholder="请再次输入您的密码" v-model="rePassword">
              </label>
            </li>
          </ul>
          <div class="btnBox" style="margin-bottom: .2rem;">
            <button class="btnDef" @click="handForget()">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forget',
  data () {
    return {
      globalMonitorFlag: true, // 是否调用全局函数
      checkCodeText: '获取验证码',
      mobile: '',
      checkCode: '',
      password: '',
      rePassword: '',
      collegesPicture: {},
      checkCodeFlag: false
    }
  },
  created () {
    this.fetchSchoolLogo()
  },
  methods: {
    // 获取高校图片
    fetchSchoolLogo () {
      this.$api.getSchoolLogo({
      }).then(res => {
        this.collegesPicture = res.data
      })
    },
    getCheckCode () {
      if (this.checkCodeFlag === true) {
        return
      }
      this.checkCodeFlag = true
      if (this.mobile === '') {
        this.$vux.toast.text('请输入手机号')
        return
      }
      this.$api.getFecthChechCode({
        phone: this.mobile
      }).then(res => {
        if (res.code === 0) {
          this.countDown(60)
        } else {
          this.checkCodeFlag = false
        }
      }).catch(() => {
        this.checkCodeFlag = false
      })
    },
    countDown (val) {
      if (val <= 0) {
        this.checkCodeFlag = false
        this.checkCodeText = '获取验证码'
        return
      }
      let time = val
      time--
      this.checkCodeText = '重新获取' + time
      setTimeout(() => {
        this.countDown(time)
      }, 1000)
    },
    handForget () {
      if (this.mobile === '') {
        this.$vux.toast.text('请输入手机号')
        return
      }
      if (this.checkCode === '') {
        this.$vux.toast.text('请输入验证码')
        return
      }
      if (this.password === '') {
        this.$vux.toast.text('请输入密码')
        return
      }
      if (this.rePassword === '') {
        this.$vux.toast.text('请再次输入密码')
        return
      }
      this.$api.getForgetPassword({
        phone: this.mobile,
        code: this.checkCode,
        password1: this.password,
        password2: this.rePassword
      }).then(res => {
        if (res.code === 0) {
          this.$vux.toast.text(res.msg)
          this.jumpTo('/login')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/less/variable.less';

#forget {
  .normBroad{
    width: 1200px;
    margin: auto;
  }
  .header{
    background: #fff;
    .normBroad{
      font-size: 0;
      img{
        width: 3rem;
        height: .6rem;
        display: inline-block;
        background-color: #ccc;
        margin: .2rem 0;
      }
      h2{
        color: #15a29c;
        font-size: .16rem;
        font-weight: 500;
        display: inline-block;
        vertical-align: middle;
        margin-left: .2rem;
      }
      p{
        color: #333;
        font-size: .16rem;
        font-weight: 500;
        float: right;
        line-height: 1rem;
        span{
          color: #333;
          font-size: .16rem;
          font-weight: 500;
        }
      }
    }
  }
  .loginContent{
    width: 100%;
    position: relative;
    img.loginBackImg{
      width: 100%;
      display: inline-block;
    }
    .loginPanelBox{
      position: absolute;
      left: 70%;
      top: 45%;
      transform: translate(-50%, -50%);
      .loginPanel{
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        width: 3.5rem;
        background-color: #fff;
        padding: .2rem;
        border-radius: .1rem;
        .loginBadge{
          position: absolute;
          width: 1rem;
          right: 1px;
          top: 1px;
          border-radius: 0 .1rem 0 0;
          overflow: hidden;
          img{
            width: 100%;
            background: rgba(0,0,0,0);
          }
          span{
            font-size: .14rem;
            color: #fff;
            line-height: .22rem;
            font-weight: 500;
            width: .56rem;
            position: absolute;
            left: 55%;
            top: 45%;
            transform: rotate(45deg) translateX(-50%);
          }
        }
        h2{
          font-size: 0.24rem;
          font-weight: bold;
          color: rgba(17, 17, 17, 1);
          line-height: .32rem;
          text-align: center;
          margin-top: .1rem;
          margin-bottom: .3rem;
        }
        ul{
          li{
            width: 100%;
            margin-bottom: .15rem;
            font-size: 0;
            position: relative;
            label{
              display: inline-block;
              width: 100%;
              border: 1px solid #eee;
              border-radius: 500px;
              padding: 0 .2rem;
              line-height: .4rem;
              height: .4rem;
              position: relative;
              input{
                display: inline-block;
                width: 100%;
                height: 100%;
                font-size: .14rem;
                font-weight: 500;
                color: #333;
                line-height: .24rem;
              }
              input:disabled {
                background-color: #fff;
              }
              img{
                width: 0.1rem;
                height: 0.18rem;
                position: absolute;
                right: 15px;
                bottom: 10px;
                transform: scale(.6) rotate(90deg);
                background-color: #fff;
              }
            }
            .loginOption{
              position: absolute;
              left: 0;
              top: .4rem;
              width: 100%;
              ul{
                border: 1px solid #eee;
                border-radius: .1rem;
                background: #fff;
                overflow: hidden;
                li{
                  margin: auto;
                  font-size: .14rem;
                  color: #333;
                  padding: 0 .2rem;
                  line-height: .4rem;
                }
                li:hover {
                  background-color: #eee;
                }
              }
            }
            span{
              display: inline-block;
              width: 35%;
              border: 1px solid #eee;
              border-radius: 500px;
              padding: 0 .15rem;
              line-height: .4rem;
              font-size: .14rem;
              font-weight: 500;
              vertical-align: top;
              background-color: #15a29c;
              color: #fff;
              text-align: center;
              float: right;
            }
          }
        }
        .loginText{
          p{
            font-size: 0.12rem;
            font-weight: 500;
            color: #333;
            line-height: 0.2rem;
            span{
              font-size: 0.12rem;
              font-weight: 500;
              color: #15a29c;
              line-height: 0.2rem;
            }
          }
        }
        .btnBox{
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          button.btnDef{
            border: none;
            width: 100%;
            text-align: center;
            border-radius: 500px;
            line-height: .4rem;
            background-color: #15a29c;
            color: #fff;
            font-size: .16rem;
            font-weight: bold;
            outline: none;
          }
        }
      }
    }
  }
}
</style>
